<template>
	<view class="creative-tabbar">
		<view class="tabbar-shadow" :class="[
            'shadow-color-' + localCurrentIndex, 
            {'shadow-animate': shadowAnimating}
        ]"></view>

		<view class="tabbar-container" :class="[
            'tab-bg-' + localCurrentIndex, 
            {'container-animate': containerAnimating}
        ]">
			<view class="tabbar-highlight" :class="{'highlight-animate': containerAnimating}"></view>
			<view class="tabbar-glass-effect" :class="{'glass-animate': containerAnimating}"></view>
			<view class="background-transition-overlay"
				:class="['overlay-color-' + localCurrentIndex, {'overlay-animate': containerAnimating}]"></view>

			<view class="tab-content">
				<view v-for="(item, index) in tabItems" :key="index" class="tab-item layered-tab" :class="{ 
                'active': localCurrentIndex === index,
                'tab-dark': true,
                'tab-item-0': index === 0,
                'tab-item-1': index === 1,
                'tab-item-2': index === 2,
                'tab-item-3': index === 3
              }" @click="handleTabClick(index)">

					<view class="icon-wrapper">
						<view class="layer-container">
							<view class="layer-effect">
								<view class="layer-item" v-for="n in 4" :key="n"></view>
								<view class="icon-container">
									<text :class="item.icon" class="tab-icon"></text>
									<view class="filled-background"></view>
									<view class="icon-glow" :class="{'active-glow': localCurrentIndex === index}">
									</view>
								</view>
							</view>
						</view>
						<text class="tab-label" :class="{'show-label': localCurrentIndex === index}">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CreativeTabBar',
		props: {
			items: {
				type: Array,
				default: function() {
					return [];
				}
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			activeColor: {
				type: String,
				default: '#3b82f6'
			},
			normalColor: {
				type: String,
				default: '#94a3b8'
			}
		},
		data() {
			return {
				localCurrentIndex: this.currentIndex,
				shadowAnimating: false,
				containerAnimating: false,
				previousIndex: 0,

				defaultItems: [{
						name: '消息',
						icon: 'iconfont tn-icon-message',
						color: '#f59e0b'
					},

					{
						name: '通讯录',
						icon: 'iconfont tn-icon-my',
						color: '#ec4899'
					},
					{
						name: '发现',
						icon: 'iconfont tn-icon-discover',
						color: '#10b981'
					},
					{
						name: '我的',
						icon: 'iconfont tn-icon-home',
						color: '#4f46e5'
					}
				],

				colorSchemes: [{
						main: '#f59e0b', // 对应"消息"的颜色
						light: '#fbbf24',
						dark: '#d97706',
						bg: 'rgba(245, 158, 11, 0.1)'
					},
					{
						main: '#ec4899', // 对应"通讯录"的颜色
						light: '#f472b6',
						dark: '#db2777',
						bg: 'rgba(236, 72, 153, 0.1)'
					},
					{
						main: '#10b981', // 对应"发现"的颜色
						light: '#34d399',
						dark: '#059669',
						bg: 'rgba(16, 185, 129, 0.1)'
					},
					{
						main: '#4f46e5', // 对应"我的"的颜色
						light: '#6366f1',
						dark: '#4338ca',
						bg: 'rgba(79, 70, 229, 0.1)'
					}
				],
				defaultActiveColor: '#3b82f6',
				idCounter: 0
			}
		},
		computed: {
			tabItems() {
				if (this.items && this.items.length > 0) {
					const result = [];
					for (let i = 0; i < this.items.length; i++) {
						const item = this.items[i];
						if (!item.color) {
							result.push({
								id: this.generateId(),
								name: item.name,
								icon: item.icon,
								color: this.colorSchemes[i % this.colorSchemes.length].main
							});
						} else {
							result.push({
								id: this.generateId(),
								name: item.name,
								icon: item.icon,
								color: item.color
							});
						}
					}
					return result;
				} else {
					const result = [];
					for (let i = 0; i < this.defaultItems.length; i++) {
						const item = this.defaultItems[i];
						result.push({
							id: this.generateId(),
							name: item.name,
							icon: item.icon,
							color: item.color
						});
					}
					return result;
				}
			},

			currentItemColor() {
				if (this.tabItems.length > this.localCurrentIndex && this.tabItems[this.localCurrentIndex]) {
					return this.tabItems[this.localCurrentIndex].color || this.activeColor || this.defaultActiveColor;
				}
				return this.activeColor || this.defaultActiveColor;
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (this.localCurrentIndex !== newVal) {
						this.previousIndex = this.localCurrentIndex;
						this.localCurrentIndex = newVal;
						this.playTabSwitchAnimations();
					}
				},
				immediate: true
			}
		},
		mounted() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.playTabSwitchAnimations();
				}, 300);
			});
		},
		methods: {
			handleTabClick(index) {
				if (this.localCurrentIndex !== index) {
					this.previousIndex = this.localCurrentIndex;
					this.localCurrentIndex = index;
					this.$emit('changeTabbar', index);
					this.playTabSwitchAnimations();
				}
			},

			generateId() {
				return 'item-' + (this.idCounter++);
			},

			playTabSwitchAnimations() {
				this.playShadowAnimation();
				this.playContainerAnimation();
			},

			playShadowAnimation() {
				if (this.shadowAnimating) {
					this.shadowAnimating = false;
					setTimeout(() => {
						this.startShadowAnimation();
					}, 10);
				} else {
					this.startShadowAnimation();
				}
			},

			playContainerAnimation() {
				if (this.containerAnimating) {
					this.containerAnimating = false;
					setTimeout(() => {
						this.startContainerAnimation();
					}, 10);
				} else {
					this.startContainerAnimation();
				}
			},

			startShadowAnimation() {
				this.shadowAnimating = true;
				setTimeout(() => {
					this.shadowAnimating = false;
				}, 800);
			},

			startContainerAnimation() {
				this.containerAnimating = true;
				setTimeout(() => {
					this.containerAnimating = false;
				}, 650);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.creative-tabbar {
		--bg-dark: rgba(40, 40, 40, 0.85);
		--text-dark: #e2e8f0;
		--shadow-dark: rgba(0, 0, 0, 0.15);

		--tab-color-0: #4f46e5;
		--tab-color-light-0: #6366f1;
		--tab-color-dark-0: #4338ca;
		--tab-rgba-0: 79, 70, 229;

		--tab-color-1: #10b981;
		--tab-color-light-1: #34d399;
		--tab-color-dark-1: #059669;
		--tab-rgba-1: 16, 185, 129;

		--tab-color-2: #f59e0b;
		--tab-color-light-2: #fbbf24;
		--tab-color-dark-2: #d97706;
		--tab-rgba-2: 245, 158, 11;

		--tab-color-3: #ec4899;
		--tab-color-light-3: #f472b6;
		--tab-color-dark-3: #db2777;
		--tab-rgba-3: 236, 72, 153;
		--transition-default: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
		--transition-quick: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
		--transform-active: translateY(-16rpx) rotate(-15deg) skew(10deg) translateZ(10px);
		--transform-pressed: scale(0.85) rotate(-15deg) skew(10deg) translateZ(5px);

		  position: fixed;
		  width: 100%;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  /* 适配安全区域（如iPhone底部刘海） */
		  padding-bottom: constant(safe-area-inset-bottom);
		  padding-bottom: env(safe-area-inset-bottom);
		  z-index: 9999; /* 确保在最上层，避免被其他元素遮挡 */
		  /* 移除可能导致偏移的样式（如margin、bottom负值等） */
		  margin: 0;


		text {
			overflow: visible;
		}

		.tabbar-shadow {
			position: absolute;
			bottom: -8rpx;

			height: 15rpx;
			background: #FFFFFF;
			filter: blur(15px);
			z-index: 1;
			transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
			transform-origin: center;
			opacity: 0.3;

			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-radius: 100%;
				opacity: 0;
				transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
			}

			&.shadow-animate {
				left: 40rpx;
				right: 40rpx;
				animation: shadow-spread 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.3);

				&::before {
					animation: shadow-pulse-1 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.3);
				}

				&::after {
					animation: shadow-pulse-2 1.05s cubic-bezier(0.2, 0.9, 0.3, 1.3);
				}
			}


			@for $i from 0 through 3 {
				&.shadow-color-#{$i} {
					background: rgba(var(--tab-rgba-#{$i}), 0.25);

					&::before,
					&::after {
						background: rgba(var(--tab-rgba-#{$i}), 0.15);
					}
				}
			}
		}

		.tabbar-container {
			position: relative;
			height: 130rpx;
			background-color: #FFFFFF;
			box-shadow:
				10rpx 10rpx 20rpx rgba(174, 174, 192, 0.4),
				-10rpx -10rpx 20rpx rgba(255, 255, 255, 0.7),
				inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.3);
			border: none;
			transition: var(--transition-default);

			&.container-animate {
				animation: container-pulse 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3);
			}

			.tabbar-highlight {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 50%;
				background: linear-gradient(to bottom,
						rgba(255, 255, 255, 0.8) 0%,
						rgba(255, 255, 255, 0.3) 60%,
						rgba(255, 255, 255, 0) 100%);
				border-radius: 32rpx;
				z-index: 2;
				pointer-events: none;
				opacity: 0.7;
				transition: opacity 0.5s ease;

				&.highlight-animate {
					animation: highlight-flash 0.8s ease;
				}
			}

			.tabbar-glass-effect {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg,
						rgba(255, 255, 255, 0.3) 0%,
						rgba(255, 255, 255, 0.1) 100%);
				border-radius: 32rpx 32rpx 0 0;
				z-index: 1;
				pointer-events: none;
				transition: opacity 0.5s ease;

				&.glass-animate {
					animation: glass-shimmer 0.8s ease;
				}
			}

			.background-transition-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
				border-radius: 32rpx;
				z-index: 0;
				pointer-events: none;

				&.overlay-animate {
					animation: overlay-fade 0.6s ease;
				}

				@for $i from 0 through 3 {
					&.overlay-color-#{$i} {
						background: radial-gradient(circle at center,
							rgba(var(--tab-rgba-#{$i}), 0.15) 0%,
							rgba(var(--tab-rgba-#{$i}), 0.05) 60%,
							rgba(var(--tab-rgba-#{$i}), 0) 100%);
					}
				}
			}

			@for $i from 0 through 3 {
				&.tab-bg-#{$i} {
					// 图鸟温馨提醒，这里改底部导航的底色，这里加了毛玻璃
					background: #F8F7F8;
					// 毛玻璃
					// background: #FFFFFF80;
					// backdrop-filter: blur(20rpx);
					// -webkit-backdrop-filter: blur(20rpx);
					border: none;
					box-shadow: 10rpx 10rpx 20rpx rgba(174, 174, 192, 0.4),
					-10rpx -10rpx 20rpx rgba(255, 255, 255, 0.7),
					inset 0 0 5rpx rgba(var(--tab-rgba-#{$i}), 0.1);

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 20%;
						right: 20%;
						height: 4rpx;
						background: linear-gradient(to right,
							transparent,
							var(--tab-color-#{$i}),
							transparent);
						border-radius: 4rpx;
						z-index: 3;
					}
				}
			}


			.tab-content {
				position: relative;
				display: flex;
				width: 100%;
				height: 100%;
				z-index: 10;
				padding: 10rpx 0;

				.tab-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 12;
					transition: var(--transition-default);
					overflow: visible;
					margin-top: 25rpx;


					@for $i from 0 through 3 {
						&.tab-item-#{$i} {
							&.active .layer-item {
								border-color: var(--tab-color-#{$i});
								box-shadow: 0 2rpx 8rpx rgba(var(--tab-rgba-#{$i}), 0.5);
							}

							&.active .icon-container .filled-background {
								background-color: var(--tab-color-#{$i});
								background-image: linear-gradient(135deg,
									var(--tab-color-#{$i}) 0%,
									var(--tab-color-light-#{$i}) 100%);
							}

							&.active .tab-label {
								color: var(--tab-color-#{$i});
								text-shadow: 0 0 15rpx rgba(var(--tab-rgba-#{$i}), 0.4);
							}
						}
					}

					&.tab-dark {
						color: var(--text-dark);

						.layer-item {
							border: 1px solid rgba(226, 232, 240, 0.3);
							background: rgba(0, 0, 0, 0.2);
						}
					}

					.icon-wrapper {
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						height: 120rpx;
						transform-style: preserve-3d;

						.layer-container {
							position: relative;
							width: 65rpx;
							height: 65rpx;
							transition: var(--transition-default);
							margin-bottom: 15rpx;
							transform-style: preserve-3d;

							.layer-effect {
								position: relative;
								width: 100%;
								height: 100%;

								.layer-item {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									border-radius: 14rpx;
									transition: var(--transition-default);
									opacity: 0.2;
									box-shadow:
										3rpx 3rpx 6rpx var(--neumorphic-shadow-dark),
										-3rpx -3rpx 6rpx var(--neumorphic-shadow-light);
								}

								.icon-container {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 14rpx;
									z-index: 5;
									transition: var(--transition-default);
									overflow: hidden;
									box-shadow:
										5rpx 5rpx 10rpx rgba(174, 174, 192, 0.4),
										-5rpx -5rpx 10rpx rgba(255, 255, 255, 0.7),
										inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.3);

									.tab-icon {
										font-size: 32rpx;
										color: white;
										transition: var(--transition-default);
										position: relative;
										z-index: 2;
										transform: translateZ(2px);
										text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
									}

									.filled-background {
										position: absolute;
										top: auto;
										bottom: 0;
										left: 0;
										width: 100%;
										height: 0;
										transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
										z-index: 1;
										transform: translateZ(1px);
									}

									.icon-glow {
										position: absolute;
										top: 50%;
										left: 50%;
										width: 0;
										height: 0;
										border-radius: 50%;
										background: radial-gradient(circle,
												rgba(255, 255, 255, 0.9) 0%,
												rgba(255, 255, 255, 0.2) 60%,
												rgba(255, 255, 255, 0) 70%);
										filter: blur(1px);
										transform: translate(-50%, -50%) translateZ(0);
										opacity: 0;
										transition: var(--transition-default);
										z-index: 1;
										pointer-events: none;

										&.active-glow {
											width: 180%;
											height: 180%;
											opacity: 0.5;
											animation: pulse-glow 2.5s infinite;
										}
									}
								}
							}
						}

						.tab-label {
							font-size: 24rpx;
							text-align: center;
							max-width: 100%;
							overflow: visible;
							white-space: nowrap;
							display: inline-block;
							position: absolute;
							bottom: 0;
							opacity: 0;
							transform: translateY(10rpx) translateZ(3px);
							transition: var(--transition-default);
							z-index: 3;
							font-weight: 600;
							letter-spacing: 0.5rpx;

							&.show-label {
								opacity: 1;
								transform: translateY(0) translateZ(3px);
								bottom: 10rpx;
								margin-left: 10rpx;
							}
						}
					}

					&.active {
						.icon-wrapper {
							.layer-container {
								transform: var(--transform-active);
								animation: float 3s ease-in-out infinite;

								.layer-effect {
									.layer-item {
										&:nth-child(1) {
											opacity: 0.2;
											transform: translateZ(1px);
										}

										&:nth-child(2) {
											opacity: 0.4;
											transform: translate(5rpx, -5rpx) translateZ(3px);
										}

										&:nth-child(3) {
											opacity: 0.6;
											transform: translate(10rpx, -10rpx) translateZ(5px);
										}

										&:nth-child(4) {
											opacity: 0.8;
											transform: translate(15rpx, -15rpx) translateZ(7px);
										}
									}

									.icon-container {
										transform: translate(20rpx, -20rpx) translateZ(10px);

										.filled-background {
											height: 100%;
										}

										&::before {
											content: '';
											position: absolute;
											top: -50%;
											left: -100%;
											width: 80%;
											height: 200%;
											background: rgba(255, 255, 255, 0.3);
											transform: rotate(45deg);
											opacity: 0;
											z-index: 3;
											pointer-events: none;
											animation: shine 3s infinite;
										}

										.tab-icon {
											transform: rotate(15deg) translateZ(3px);
											animation: twirl 5s ease-in-out infinite;
										}
									}
								}
							}
						}
					}

					&:active:not(.active) {
						.icon-wrapper {
							.layer-container {
								transform: var(--transform-pressed);
								transition: var(--transition-quick);
							}

							.tab-label {
								transform: scale(0.95) translateZ(2px);
							}
						}
					}
				}
			}
		}
	}

	@keyframes pulse-glow {

		0%,
		100% {
			opacity: 0.5;
			transform: translate(-50%, -50%) scale(1);
		}

		50% {
			opacity: 0.7;
			transform: translate(-50%, -50%) scale(1.3);
		}
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(-16rpx) rotate(-15deg) skew(10deg) translateZ(10px);
		}

		50% {
			transform: translateY(-22rpx) rotate(-15deg) skew(10deg) translateZ(12px);
		}
	}

	@keyframes twirl {

		0%,
		100% {
			transform: rotate(15deg) translateZ(3px);
		}

		25% {
			transform: rotate(30deg) translateZ(4px);
		}

		75% {
			transform: rotate(0deg) translateZ(3px);
		}
	}

	@keyframes shine {
		0% {
			transform: rotate(45deg) translateX(-120%) translateZ(0);
			opacity: 0;
		}

		30% {
			opacity: 0.3;
		}

		100% {
			transform: rotate(45deg) translateX(120%) translateZ(0);
			opacity: 0;
		}
	}

	@keyframes shadow-spread {
		0% {
			left: 40%;
			right: 40%;
			opacity: 0.2;
			filter: blur(10px);
			transform: scaleX(0.15);
		}

		50% {
			opacity: 1;
			filter: blur(25px);
			transform: scaleX(1.1);
		}

		75% {
			opacity: 0.7;
		}

		100% {
			left: 40rpx;
			right: 40rpx;
			opacity: 0.5;
			filter: blur(15px);
			transform: scaleX(1);
		}
	}

	@keyframes shadow-pulse-1 {
		0% {
			opacity: 0;
			transform: scale(0.6);
			filter: blur(10px);
		}

		40% {
			opacity: 0.7;
			transform: scale(1.4);
			filter: blur(30px);
		}

		100% {
			opacity: 0;
			transform: scale(1.8);
			filter: blur(10px);
		}
	}

	@keyframes shadow-pulse-2 {
		0% {
			opacity: 0;
			transform: scale(0.3);
			filter: blur(5px);
		}

		50% {
			opacity: 0.5;
			transform: scale(1.6);
			filter: blur(25px);
		}

		100% {
			opacity: 0;
			transform: scale(2);
			filter: blur(15px);
		}
	}

	@keyframes container-pulse {
		0% {
			transform: scale(0.98);
		}

		50% {
			transform: scale(1.02);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes highlight-flash {
		0% {
			opacity: 0.5;
		}

		50% {
			opacity: 0.9;
		}

		100% {
			opacity: 0.7;
		}
	}

	@keyframes glass-shimmer {
		0% {
			opacity: 0.7;
			background-position: 0% 0%;
		}

		50% {
			opacity: 1;
			background-position: 100% 100%;
		}

		100% {
			opacity: 0.7;
			background-position: 0% 0%;
		}
	}

	@keyframes overlay-fade {
		0% {
			opacity: 0;
			transform: scale(0.8);
		}

		50% {
			opacity: 1;
			transform: scale(1.1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}
</style>